<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        button {
            border: none;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid var(--btnColor);
        }
        [data-theme="dark"] {
             --bgColor:#666;
             --color:#f5f5f5;
             --btnColor:#606266;
             --btnBgColor:#fff;
        }

        [data-theme="light"] {
            --bgColor:#f5f5f5;
            --color:#666;
            --btnColor:#fff;
            --btnBgColor:#63b0ff;
       }

       body {
          color: var(--color);
          background-color: var(--bgColor);
       }
       button {
         color: var(--btnColor);
         background-color: var(--btnBgColor);
       }
       a {
         color:#fff
       }
       .art {
         color: #f40;
       }
    </style>
</head>
<body>

    <h1>我是主题内容</h1>
    <button onclick="toggleTheme()" id="btn">切换主题</button>

    <script>
        btn.onclick = function() {
            const htmlEle = document.documentElement
            const curretTheme = htmlEle.getAttribute('data-theme')
            let theme = curretTheme === 'dark' ? 'light' : 'dark'
            htmlEle.setAttribute('data-theme', theme)
        }
    </script> 
</body>
</html>